/*
 * @Autor: dc
 * @Date: 2022-03-31 09:50:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-18 16:27:21
 * @Description: 树组件
 */

import React, { Component } from 'react';
import { Toast } from 'antd-mobile'
import store from '../../redux/store'
import $ from 'jquery'
import './index.scss'
import { actionBarConfig } from '../../redux/action/tree'
// 操作组件
import Sunlight from './components/Sunlight'
import Digging from './components/Digging'
import Fertilization from './components/Fertilization'
import Watering from './components/Watering'



class index extends Component {
    // 树动画
    treeAnimation = () => {
        const { isPlanting } = store.getState()
        if (!isPlanting) {
            return false;
        }
        store.dispatch({
            type: 'plantingBoolean',
            data: false
        })
        $('#planting').addClass('scale');
        setTimeout(() => {
            store.dispatch({
                type: 'plantingBoolean',
                data: true
            })
            $('#planting').removeClass('scale')
        }, 1600)
    }
    // 添加能量
    addEnergy = () => {
        const { energyTimeNum } = store.getState()
        store.dispatch({
            type: 'incrementEnergyNum',
            data: energyTimeNum
        })
        $('.water_num').animate({
            "top": "-20%",
            "opacity": '1'
        }, 1000, function () {
            $(this).delay(800).animate({
                "opacity": '0'
            }, 500, function () {
                $(this).css({ "top": "20%" })
            })
        })
    }


    render() {
        const { phase, energyTimeNum, treeArr } = store.getState()
        let phaseTree = treeArr.find(item => item.id === phase)
        const { onRefSunlight, onRefDigging, onRefFertilization, onRefWatering } = this.props

        return (
            <div className='planting_div pos_r'>
                {/* 添加能量值 */}
                <div className="water_num">+{energyTimeNum}</div>

                {/* 太阳 */}
                <Sunlight
                    ref={onRefSunlight}
                    treeAnimation={this.treeAnimation}
                    addEnergy={this.addEnergy}
                ></Sunlight>
                {/* 松土 */}
                <Digging
                    ref={onRefDigging}
                    treeAnimation={this.treeAnimation}
                    addEnergy={this.addEnergy}
                ></Digging>
                {/* 施肥 */}
                <Fertilization
                    ref={onRefFertilization}
                    treeAnimation={this.treeAnimation}
                    addEnergy={this.addEnergy}
                ></Fertilization>
                {/* 浇水 */}
                <Watering
                    ref={onRefWatering}
                    treeAnimation={this.treeAnimation}
                    addEnergy={this.addEnergy}
                ></Watering>
                {/* 树 */}
                <div className='planting_location'>
                    <i id="planting"
                        onClick={this.treeAnimation}
                        className='planting_img'>
                        <img
                            key={phaseTree.id}
                            src={phaseTree.icon} alt="" />
                    </i>
                </div>

            </div>
        );
    }
}

export default index;